<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
    <div class="layui-row">
        <button id="healthInfoUpdate" type="button" class="layui-btn layui-bg-blue">健康信息修改</button>
    </div>
    <div id="healthInfo" style="height: 600px; width: 90%"></div>

    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','element', 'echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            echarts = layui.echarts;

        $('#healthInfoUpdate').on("click", function (){
            let userId = localStorage.getItem("loginUserId");
            var content = miniPage.getHrefContent('page/UserEdit.html', userId);
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '编辑',
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: [openWH[0] + 'px', openWH[1] + 'px'],
                offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        })

        var chartDom = document.getElementById('healthInfo');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['BMI', '最低血压', '最高血压', '血糖', '血脂']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '实际值',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 1, 2, 3, 4]
                },

                {
                    name: '低于正常值',
                    type: 'bar',
                    barWidth: 5,
                    stack: 'Search Engine',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [18, 60, 90, 3.9, 5.18]
                },
                {
                    name: '正常值',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [24, 80, 120, 6.1, 5.20]
                },
                {
                    name: '高于正常值',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [50, 120, 200, 10, 8]
                }
            ]
        };
        let userId = localStorage.getItem("loginUserId");
        $.ajax({
            url: '/api/getUserById',
            type: 'GET',
            data: {id: userId},
            success: function(response){
                let height = response.data.height;
                let weight = response.data.weight;
                let bmi = response.data.bmi;

                option.series[0].data = [bmi, response.data.hypotensiveValue, response.data.hypertensiveValue,
                    response.data.bloodGlucoseValue, response.data.bloodLipidValue]

                option && myChart.setOption(option);
            }
        });




    });
</script>